<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta name=viewport
              content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
        <th:block th:include="include :: header('视频播放')"/>
<!--        <th:block th:include="include :: video-js-css"/>-->

        <style>

            #video {
                width: 800px;
                height: 338px;
                margin: auto;
            }

            .flex {
                display: flex;
                align-content: center;
                justify-content: center;
            }

            #mse{
                height: auto !important;
            }
        </style>
    </head>
    <body class="white-bg container">
        <div class="row">
            <h3 style="text-align: center">[[${courseDetail.title}]]</h3>
        </div>
        <div class="row">
            <div class="flex">
                <span onclick="minus()" class="btn btn-primary" style="margin-right: 10px"><i class="fa fa-minus"></i> 缩小</span>
                <span onclick="plus()" class="btn btn-primary"><i class="fa fa-plus"></i> 放大</span>
            </div>
        </div>

        <div id="video" class="row flex" style="margin-top: 10px">
            <div id="mse"></div>
        </div>


        <th:block th:include="include :: footer"/>
<!--        <th:block th:include="include :: video-js-js"/>-->
        <th:block th:include="include :: xgplayer-js"/>
        <script type="text/javascript">
            var url         = '[[${courseDetail.host + courseDetail.videoUrl}]]'
            var delta       = 50
            var videoHeight = 700
            var videoWidth  = 800
            var duration    = 0
            var currentTime = 0

            let player = new Player({
                                        id: 'mse',
                                        autoplay: true,
                                        volume: 0.3,
                                        url: url,
                                        poster: "",
                                        playsinline: true,
                                        videoInit: true,
                                        fluid: true,
                                        fitVideoSize: 'fixWidth',
                                        // disableProgress: false , //禁止进度条拖动交互
                                        // lastPlayTime: 20, //视频起播时间（单位：秒）
                                        lastPlayTimeHideDelay: 5, //提示文字展示时长（单位：秒）
                                        keyShortcut: 'on',
                                        allowSeekPlayed: true,
                                        keyShortcutStep: { //设置调整步长
                                            // currentTime: 15, //播放进度调整步长，默认10秒
                                            volume: 0.2 //音量调整步长，默认0.1
                                        },
                                        "playbackRate": [
                                            0.8,
                                            1,
                                            1.2,
                                            1.5
                                        ]

                                    });
            player.once('ready', () => {
                console.log('ready')

                player.on('requestFullscreen', function () {
                    let widowHeight = window.innerHeight
                    let widowWidth = window.innerWidth
                    console.log(`进入全屏，widowHeight=${widowHeight},widowWidth=${widowWidth}`)
                })

                player.on('exitFullscreen', function () {
                    console.log('-----退出全屏---')
                })

                player.on('error', function (error) {
                    console.log('-----视频播放器发生 error-----')
                    console.log(error)
                })

                player.on('ended', function () {
                    console.log('-----视频播放结束---时长：' + player.duration)
                })

                player.on('timeupdate', function (v) {
                    currentTime = player.currentTime
                    duration    = player.duration
                    //console.log(`duration = ${duration},currentTime = ${currentTime}`)

                })
            })

            function minus() {
                videoHeight -= delta
                videoWidth -= delta
                $('#video').css('width', videoWidth + 'px')
                console.log($('video').css('height'))
            }

            function plus() {
                videoHeight += delta
                videoWidth += delta
                $('#video').css('width', videoWidth + 'px')
            }
        </script>
    </body>
</html>